<template>
    <view class="measure" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar backgroundColor="#fff"></nav-bar>
        <view class="m-container">
            <view class="step">
                <view class="one" :class=" { current: currentStep == 1 } ">1</view>
                <view class="step-line"></view>
                <view class="two" :class=" { current: currentStep == 2 } ">2</view>
                <view class="step-line"></view>
                <view class="three" :class=" { current: currentStep == 3 } ">3</view>
            </view>
            <view class="step-text">
                <view class="one" :class=" { tip: currentStep == 1 } ">吸气准备</view>
                <view class="two" :class=" { tip: currentStep == 2 } ">憋气8秒</view>
                <view class="three" :class=" { tip: currentStep == 3 } ">呼气测量</view>
            </view>
            <view class="step-1" v-if="currentStep == 1">
                <view class="s-c">
                    <view class="title">1</view>
                    <u-image width="460rpx" height="460rpx" :showMenuByLongpress=" false "
                        src="http://oss.antaimedical.com/images/static/2024/08/66aae823e4b09217821c0f9c0INhny33SHn204f32aecc98b6d82008257a4f0b1a05d.png"
                        :lazy-load=" true "></u-image>
                    <view class="tips">
                        <text>往肺里吸入足够多的空气直至</text>
                        <text style="color: #545DDE;">肺部充满气体</text>
                    </view>
                </view>
                <view class="s-c">
                    <view class="title">2</view>
                    <u-image width="460rpx" height="460rpx" :showMenuByLongpress=" false "
                        src="http://oss.antaimedical.com/images/static/2024/08/66ac4e90e4b000d2c606b51a69i70itZWCBC857fde7ad88ff655902feaf1411117c2.png"
                        :lazy-load=" true "></u-image>
                    <view class="tips">
                        <text>
                            点击
                            <text style="color: #545DDE;">仪器按键</text>进入下一步
                        </text>
                    </view>
                </view>
            </view>
            <view class="step-2" v-else-if="currentStep == 2">
                <view class="tips">
                    <text>保持当前状态,</text>
                    <text style="color: #545DDE;">憋气8秒</text>
                </view>
                <!-- <u-image width="750rpx" height="750rpx" :showMenuByLongpress="false"
					src="http://oss.antaimedical.com/images/static/2024/08/66aae852e4b000d2c606b519OfPsiFPB8Bj4b6545a1c18c78861c69657e494530e60.png"
                :lazy-load="true"></u-image>-->
                <view class="timeout">{{ fsTimeout }}</view>
            </view>
            <view class="step-3" v-else-if="currentStep == 3">
                <view class="title" v-if="currentTime === undefined">向仪器中呼气，将小球吹向圈中</view>
                <view class="title" v-else>将小球维持在圈中{{ currentTime }}秒</view>
                <view class="scroll" :style=" { width: windowHeight < 800 ? '450rpx' : '530rpx' } ">
                    <view class="circle"
                        :style=" { width: windowHeight < 800 ? '450rpx' : '530rpx', height: windowHeight < 800 ? '450rpx' : '530rpx', borderWidth: windowHeight < 800 ? '24rpx' : '30rpx' } ">
                    </view>
                    <view class="live-animal"
                        :style=" { bottom: percent + '%', width: windowHeight < 800 ? '100rpx' : '128rpx', height: windowHeight < 800 ? '100rpx' : '128rpx' } ">
                    </view>
                </view>
            </view>
        </view>
        <u-modal :show=" show " title="获取失败" :content=" content " @confirm=" back "></u-modal>
        <u-modal :show=" showUpdate " @cancel=" handleCancel " @confirm=" goUpdate " confirmText="去更新" cancelText="暂不更新"
            showCancelButton cancelColor="#000000" confirmColor="#545DDE">
            <view class="tips">注册的肺活量与你当前吹气量不符,请在测量前吸满气体,测量时尽可能呼出所有气体,或者更新你的肺活量信息</view>
        </u-modal>
    </view>
</template>

<script>
import {
    getMaxInhaleExhale,
    addExpirationData,
    getRer
} from '@/api/index.js'
import {
    ab2hex,
    hex2int,
    hex2float,
    hexToString,
    intHex2
} from '@/utils/utils.js'
import {
    ooo4,
    ooo8,
    oood,
    oooe,
} from '@/api/bleApi.js'
import {
    mapState,
    mapGetters
} from 'vuex'
const dayjs = require('@/utils/dayjs.min.js');
const BLE = require('@/utils/ble.js');
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync("userId"),
            windowHeight: uni.$u.sys().windowHeight,
            currentStep: 1,
            fsTimeout: 8,
            currentTime: undefined,
            show: false,
            showUpdate: false,
            content: '',
            params: undefined,
            percent: 0, // 圆球上浮高度百分比
            state_t: 1, // 标题显示状态
            timer: null,
            noting: null,
            testTime: undefined, // 本次测量时间
            timeout: 0,
            currentSerial: '',
            startTime: undefined,
            endTime: undefined,
            maxEexhale: undefined,
            lowEexhale: undefined,
            highEexhale: undefined,
            maxInhale: undefined,
            lowInhale: undefined,
            highInhale: undefined,
            flow: [], // 流量
            CO2CONC: [], //CO2浓度
            CO2Rh: ['0.0'], // CO2湿度值
            CO2TEMP: ['0.0'], // CO2温度值
            m_flow: [], // 流量缺失序号
            m_CO2CONC: [], //CO2浓度缺失序号
            m_CO2Rh: [], // CO2湿度值缺失序号
            m_CO2TEMP: [], // CO2温度值缺失序号
            filter_flow:[],// 流量缺失序号 筛选出的
            filter_CO2CONC:[],// CO2浓度缺失序号 筛选出的
            degree: {
                one: 0,
                two: 0,
                three: 0,
                four: 0
            },
            exhale_none: 0,
            exhale_tag: 0, // 是否开始吹气标识（0为未开始，1为已开始）
            exhale_flow_thresh: 5, // 判断此流量是否吹气的阈值，大于此值则认为用户在吹气，否则不在吹气
            exhale_num_thresh: 3, // 未吹气时，流量值连续>exhale_flow_thresh的最大次数
            exhale_stop_num_thresh: 3, // 已吹气时，流量值连续<exhale_flow_thresh的最大次数
            exhale_num: 0, // 未吹气时，检测到流量值连续大于exhale_flow_thresh的次数
            exhale_stop_num: 0, // 已吹气时，检测到流量值连续小于exhale_flow_thresh的次数
            flow_max: 0,
            CO2CONC_max: 0,
            CO2Rh_max: 0,
            CO2TEMP_max: 0,
        }
    },
    computed: {
        ...mapState({
            ble: state => state.ble, // 实时蓝牙全局状态
            userInfo: state => state.userInfo,
            // deviceInfo: state => state.deviceInfo
        }),
        ...mapGetters({
            deviceInfo: 'getDeviceInfo',
        }),
        integrity () {
            return this.degree.one >= this.CO2CONC_max && this.degree.four >= this.flow_max
        }
    },
    watch: {
        'ble.state': {
            handler (nVal, oVal) {
                if (nVal == -1 && oVal == 0) {
                    // 意外断开
                    this.$store.commit('changeBleMeasureState', 2)
                    uni.showModal({
                        title: '提示',
                        content: '检测到蓝牙已断开,请重新连接后再进行测量',
                        showCancel: false,
                        confirmText: '确定',
                        success: (errModal) => {
                            if (errModal.confirm) {
                                if (this.params.tag == 9) {
                                    uni.redirectTo({
                                        url: '/pagesB/login/device/connect/index'
                                    })
                                } else {
                                    uni.switchTab({
                                        url: '/pages/health/index'
                                    })
                                }
                            }
                        }
                    })
                }
            }
        },
        startTime (nVal, oVal) {
            if (nVal && !oVal) {
                clearTimeout(this.noting)
            }
        },
        filter_flow(nVal, oVal){
            if (nVal.length) {
                nVal.forEach((item, index) => {
                    setTimeout(() => {
                        oood({ runCode: item, lengthCode: 2, contentCode: item })
                    }, 100)
                })
            }
        },
        filter_CO2CONC(nVal, oVal){
            if (nVal.length) {
                nVal.forEach((item, index) => {
                    setTimeout(() => {
                        oooe({ runCode: item, lengthCode: 2, contentCode: item })
                    }, 100)
                })
            }
        }
    },
    filters: {
        titleFilte (state) {
            if (state == 2) {
                return '保持当前状态,憋气8秒'
            } else if (state == 3) {
                return '向仪器中呼气,将小球吹向圈中'
            } else if (state == 4) {
                return '将小球维持在圈中'
            }
        }
    },
    onLoad (OPTIONS) {

        this.params = JSON.parse(OPTIONS.params)
        this.testTime = OPTIONS.differentTime == '1' ? 24 : 22
        this.getMaxVal()
        ooo4()
        uni.$on('pendingData', this.pendingData)
        this.noting = setTimeout(() => {
            if (this.state_t == 1) {
                if (this.params.tag == 9) {
                    let parameter = {
                        tag: 9
                    }
                    uni.redirectTo({
                        url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
                    })
                } else {
                    uni.switchTab({
                        url: '/pages/health/index'
                    })
                }
            }
        }, 30000)
    },
    onUnload () {
        uni.$off('pendingData', this.pendingData)
        clearTimeout(this.noting)
        clearInterval(this.timer)
        console.log('onUnload', this.ble.measureState);
        if (this.ble.measureState == 1 || this.ble.measureState == -1) {
            ooo8()
            this.$store.commit('changeBleMeasureState', 2)
        }
    },
    methods: {
        // 监听状态码
        pendingData (res) {
            if (res.code == 'aa558005') {
                // 按下按钮
                this.watchFirst()
            }
            if (this.ble.measureState == 1) {
                // 测量阶段 aa558007 aa558006
                if (res.code == 'aa55800d') {
                    // 获取补包流量值
                    if (!this.m_flow.includes(res.runCode)) {
                        this.flow.splice(res.runCode-1, 0, res.data[res.data.length - 1])
                        this.m_flow.splice(res.runCode-1, 0, res.runCode)
                    }
                }
                if (res.code == 'aa55800e') {
                    // 获取补包CO2
                    if (!this.CO2CONC.includes(res.runCode)) {
                        this.CO2CONC.splice(res.runCode-1, 0, res.data[res.data.length - 1])
                        this.m_CO2CONC.splice(res.runCode-1, 0, res.runCode)
                    }
                }
                if (res.code == 'aa558007') {
                    // 获取CO2
                    let CO2 = res.data[res.data.length - 1]
                    this.CO2CONC.push(CO2)
                    this.m_CO2CONC.push(res.runCode)
                    this.CO2CONC_max = Math.max.apply(-1, this.m_CO2CONC); //数据包的最大索引
                    this.filter_CO2CONC = this.findDisappearedNumbers(this.m_CO2CONC, this.CO2CONC_max).filter(Boolean)
                }
                if (res.code == 'aa558006') {
                    // 获取流量值
                    let result
                    let flowItem = res.data[res.data.length - 1]
                    this.flow.push(flowItem)
                    this.m_flow.push(res.runCode)
                    this.flow_max = Math.max.apply(-1, this.m_flow); //数据包的最大索引
                    this.filter_flow = this.findDisappearedNumbers(this.m_flow, this.flow_max).filter(Boolean)
                    if (this.currentStep >= 3) {
                        if (flowItem < this.lowEexhale) {
                            result = (flowItem / this.lowEexhale) * 10
                        } else if (flowItem > this.highEexhale) {
                            result = ((flowItem - this.highEexhale) / this.lowEexhale) * 10 + 90
                        } else if (flowItem >= this.lowEexhale && flowItem <= this.highEexhale) {
                            result = (flowItem - this.lowEexhale) / (this.highEexhale - this.lowEexhale) *
                                80 + 10
                        }
                        this.percent = Number(result.toFixed(2))
                        if (this.exhale_tag == 0) { //如果是在未吹气状态，检测流量值是否连续>exhale_flow_thresh
                            if (flowItem > this.exhale_flow_thresh) {
                                this.exhale_num += 1;
                                this.exhale_none = 0;
                            } else {
                                this.exhale_num = 0;
                                this.exhale_none += 1
                            }
                        } else { //如果是在已吹气状态，检测流量值是否连续<exhale_flow_thresh
                            if (flowItem < this.exhale_flow_thresh) {
                                this.exhale_stop_num += 1;
                            } else {
                                this.exhale_stop_num = 0;
                            }
                        }
                        if (this.exhale_num > this.exhale_num_thresh) { //连续突破阈值，认定为【开始吹气】
                            console.log("开始吹气！！！！，开始位点次数：" + this.exhale_num);
                            this.exhale_tag = 1;
                            this.exhale_num = 0;
                            this.state_t = 4
                            this.currentTime = this.testTime == 24 ? 8 : 6
                        }
                        if (this.exhale_stop_num > this.exhale_stop_num_thresh) { //连续突破阈值，认定为【停止吹气】
                            console.log("停止吹气！！！！，停止位点次数：" + this.exhale_stop_num);
                            // 结束上传
                            this.exhale_tag = 0;
                            this.exhale_stop_num = 0;
                            ooo8()
                            this.$store.commit('changeBleMeasureState', 2)
                            clearInterval(this.timer)
                            this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                            this.uploadData()
                        }
                        if (this.exhale_none == 20) {
                            console.log('两秒内未吹气')
                            clearInterval(this.timer)
                            ooo8()
                            this.$store.commit('changeBleMeasureState', 2)
                            uni.showModal({
                                title: '提示',
                                content: '测量失败,检测到两秒内未吹气',
                                showCancel: false,
                                confirmText: '回到首页',
                                success: (errModal) => {
                                    if (errModal.confirm) {
                                        uni.switchTab({
                                            url: '/pages/health/index'
                                        })
                                        // if (this.params.tag == 9) {
                                        //     let parameter = {
                                        //         tag: 9
                                        //     }
                                        //     uni.redirectTo({
                                        //         url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
                                        //     })
                                        // } else {
                                        //     uni.switchTab({
                                        //         url: '/pages/health/index'
                                        //     })
                                        // }
                                    }
                                }
                            })
                        }
                    }
                }
            }
        },
        watchFirst (res) {
            console.log('rer$once触发')
            // 开始测量
            this.currentStep = 2
            clearTimeout(this.noting)
            this.startTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            this.$store.commit('changeBleMeasureState', 1)
            this.timer = setInterval(() => {
                this.timeout += 1
                if (this.currentStep == 2) {
                    if (this.fsTimeout > 0) {
                        this.fsTimeout--
                        if (this.fsTimeout == 0) {
                            this.currentStep = 3
                        }
                    }
                } else if (this.currentStep == 3) {
                    if (this.currentTime > 0) {
                        this.currentTime--
                    }
                }
                if (this.testTime == 24) {
                    if (this.timeout == 19) {
                        clearInterval(this.timer)
                        this.$store.commit('changeBleMeasureState', 2)
                        this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                        ooo8().then((res) => {
                            if (res.data[0] == 0) {
                                this.uploadData()
                            }
                        })
                    }
                } else if (this.testTime == 22) {
                    if (this.timeout == 17) {
                        clearInterval(this.timer)
                        this.$store.commit('changeBleMeasureState', 2)
                        this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                        ooo8().then((res) => {
                            if (res.data[0] == 0) {
                                this.uploadData()
                            }
                        })
                    }
                }
            }, 1000)
        },
        // 上传数据
        async uploadData () {
            if (this.ble.measureState == 5) return
            this.$store.commit('changeBleMeasureState', 5)
            let params = {
                "bodyId": this.userInfo.id,
                "deviceId": this.deviceInfo.deviceId,
                "userId": this.userId,
                "flow": this.flow.join(','),
                "CO2CONC": this.CO2CONC.join(','),
                "CO2Rh": this.CO2Rh.join(','),
                "CO2TEMP": this.CO2TEMP.join(','),
                "isException": '1',
                "startTime": this.startTime,
                "endTime": this.endTime,
                ...this.params
            }
            try {
                const res = await addExpirationData(params)
                this.reset()
                if (res.code == 200) {
                    this.$store.commit('changeBleMeasureState', 3)
                    let params_2 = {
                        recordId: res.data,
                        tag: this.params.tag,
                    }
                    const res_2 = await getRer(params_2)
                    if (res_2.code == 200) {
                        uni.$emit('refreshData')
                        uni.redirectTo({
                            url: `/pagesA/health/device/result/index?data=${JSON.stringify({ ...res_2.data, ...this.params })}`
                        })
                    } else if (res_2.code == 1711) {
                        this.show = true
                        this.content = res_2.msg
                    } else if (res_2.code == 'E0033') {
                        this.showUpdate = true
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '测量结果获取失败',
                            showCancel: false,
                            confirmText: '回到首页',
                            success: (errModal) => {
                                if (errModal.confirm) {
                                    uni.switchTab({
                                        url: '/pages/health/index'
                                    })
                                    // if (this.params.tag == 9) {
                                    //     let parameter = {
                                    //         tag: 9
                                    //     }
                                    //     uni.redirectTo({
                                    //         url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
                                    //     })
                                    // } else {
                                    //     uni.switchTab({
                                    //         url: '/pages/health/index'
                                    //     })
                                    // }
                                }
                            }
                        })
                    }
                } else if (res.code == 'E0019') {
                    console.log('重复数据');
                    this.$store.commit('changeBleMeasureState', 4)
                    wx.reportEvent('num_monitor', {
                        params: '多次上传'
                    })
                } else {
                    this.$store.commit('changeBleMeasureState', 4)
                    uni.showModal({
                        title: '提示',
                        content: '测量结果获取失败',
                        showCancel: false,
                        confirmText: '回到首页',
                        success: (errModal) => {
                            if (errModal.confirm) {
                                uni.switchTab({
                                    url: '/pages/health/index'
                                })
                                // if (this.params.tag == 9) {
                                //     let parameter = {
                                //         tag: 9
                                //     }
                                //     uni.redirectTo({
                                //         url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
                                //     })
                                // } else {
                                //     uni.switchTab({
                                //         url: '/pages/health/index'
                                //     })
                                // }
                            }
                        }
                    })
                }
            } catch (e) {
                //TODO handle the exception
                this.$store.commit('changeBleMeasureState', 4)
                this.reset()
                uni.showModal({
                    title: '提示',
                    content: '测量结果获取失败',
                    showCancel: false,
                    confirmText: '回到首页',
                    success: (errModal) => {
                        if (errModal.confirm) {
                            uni.switchTab({
                                url: '/pages/health/index'
                            })
                            // if (this.params.tag == 9) {
                            //     let parameter = {
                            //         tag: 9
                            //     }
                            //     uni.redirectTo({
                            //         url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
                            //     })
                            // } else {
                            //     uni.switchTab({
                            //         url: '/pages/health/index'
                            //     })
                            // }
                        }
                    }
                })
            }
        },
        // 获取呼气吸气测量期望值
        async getMaxVal () {
            let params = {
                userId: this.userId
            }
            const res = await getMaxInhaleExhale(params)
            if (res.code == 200) {
                this.maxInhale = res.data.maxInhaleL * 2
                if (this.testTime == 24) {
                    let otherNum = (res.data.maxExhaleL * 0.75).toFixed(2)
                    this.maxEexhale = otherNum * 2
                } else {
                    this.maxEexhale = res.data.maxExhaleL * 2
                }
                this.lowEexhale = Number((this.maxEexhale * 0.3).toFixed(2))
                this.highEexhale = Number((this.maxEexhale * 0.7).toFixed(2))
                this.lowInhale = Number((this.maxInhale * 0.3).toFixed(2))
                this.highInhale = Number((this.maxInhale * 0.7).toFixed(2))
            }
        },
        reset () {
            this.flow = []
            this.CO2CONC = []
            this.CO2Rh = []
            this.CO2TEMP = []
            this.m_flow = []
            this.m_CO2CONC = []
            this.m_CO2Rh = []
            this.m_CO2TEMP = []
            this.degree = {
                one: 0,
                two: 0,
                three: 0,
                four: 0
            }
        },
        back () {
            uni.switchTab({
                url: '/pages/health/index'
            })
            // if (this.params.tag == 9) {
            //     let parameter = {
            //         tag: 9
            //     }
            //     uni.redirectTo({
            //         url: `/pagesA/health/device/measure/prepare?params=${JSON.stringify(parameter)}`
            //     })
            // } else {
            //     uni.switchTab({
            //         url: '/pages/health/index'
            //     })
            // }
        },
        goUpdate () {
            uni.redirectTo({
                url: '/pagesB/my/userInfo/record'
            })
        },
        handleCancel () {
            uni.switchTab({
                url: '/pages/health/index'
            })
        },
        getNewArray (array, subGroupLength) {
            let index = 0;
            let newArray = [];
            while (index < array.length) {
                newArray.push(array.slice(index, (index += subGroupLength)));
            }
            return newArray;
        },
        findDisappearedNumbers (arr, max) {
            let nums = JSON.parse(JSON.stringify(arr))
            const set = new Set(nums);
            const res = [];
            for (let i = 0; i < max; i++) {
                if (!set.has(i)) {
                    res.push(i);
                }
            }
            return res;
        }
    }
}
</script>
<style lang="scss">
page {
    background: #ffffff;
    min-height: 100%;
}
</style>

<style lang="scss" scoped>
.measure {
    .m-container {
        padding: 48rpx 0;

        .step-text,
        .step {
            margin: 0 80rpx;
            padding: 0 32rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .one,
            .two,
            .three {
                width: 94rpx;
                height: 94rpx;
                line-height: 86rpx;
                text-align: center;
                border: 4rpx solid #d8d8d8;
                border-radius: 50%;
                color: #d8d8d8;
                font-family: PingFangSC-Medium, PingFang SC;
            }

            .current {
                background-color: #545dde;
                color: #fff;
                border: 0;
                line-height: 94rpx;
            }

            .step-line {
                flex: auto;
                height: 4rpx;
                background-color: #d8d8d8;
            }
        }

        .step-text {
            margin-top: 10rpx;

            .one,
            .two,
            .three {
                font-weight: 500;
                font-size: 36rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                color: #cccccc;
                line-height: 44rpx;
                border: 0;
            }

            .tip {
                color: #545dde;
            }
        }

        .step-1 {
            margin: 120rpx 80rpx 0;

            .s-c {
                position: relative;
                width: 100%;
                background: #fafafa;
                border-radius: 16rpx;
                padding: 16rpx 32rpx 34rpx;
                margin-bottom: 104rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                    width: 112rpx;
                    height: 112rpx;
                    background: #ffffff;
                    border: 2rpx solid #e5e5e5;
                    border-radius: 50%;
                    line-height: 108rpx;
                    text-align: center;
                    color: #545dde;
                    font-size: 48rpx;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .tips {
                    width: 100%;
                    height: 132rpx;
                    margin-top: -30rpx;
                    padding: 18rpx 32rpx;
                    background: #ffffff;
                    border-radius: 2rpx;
                    color: #666666;
                    font-size: 32rpx;
                    text-align: left;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                }
            }
        }

        .step-2 {
            margin-top: 120rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .tips {
                width: 100%;
                height: 750rpx;
                background-image: url('http://oss.antaimedical.com/images/static/2024/08/66aae852e4b000d2c606b519OfPsiFPB8Bj4b6545a1c18c78861c69657e494530e60.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                font-size: 42rpx;
                color: #666666;
                letter-spacing: 1px;
            }

            .timeout {
                width: 168rpx;
                height: 168rpx;
                margin-top: -36rpx;
                background: #545dde;
                color: #fff;
                text-align: center;
                line-height: 168rpx;
                font-weight: 500;
                font-size: 64rpx;
                border-radius: 50%;
            }
        }

        .step-3 {
            margin-top: 120rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                font-size: 38rpx;
                color: #666666;
                letter-spacing: 1px;
                margin-bottom: 80rpx;
            }

            .scroll {
                position: relative;
                padding: 0 0 216rpx 0;
                display: flex;
                flex-direction: column;
                align-items: center;

                .circle {
                    border-radius: 50%;
                    background-color: transparent;
                    border: 30rpx solid rgba(#545dde, 0.2);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .time {
                        font-weight: 500;
                        font-size: 120rpx;
                        color: #545dde;
                    }
                }

                .live-animal {
                    width: 128rpx;
                    height: 128rpx;
                    border-radius: 50%;
                    background-color: #545dde;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 50%);
                    transition: all 0.3s ease 0s !important;
                }
            }
        }
    }
}
</style>